<template>
  <!-- 监控 新闻 -->
  <div class="body videoAndNews">
    <div class="titleBox">
      <img src="../../assets/videoAndNews.png" alt="" class="titlebg" />
      <p class="title">实时监控</p>
      <img
        src="@/assets/switch.png"
        alt=""
        class="switch"
        @click="mainType = !mainType"
      />
    </div>
    <div class="main">
      <div class="video" v-show="mainType">
        <!-- <div id="video-container"></div> -->
        <!-- <video id="myPlayer" controls playsInline webkit-playsinline autoplay>
          <source
            src="https://open.ys7.com/v3/openlive/G00172743_1_1.m3u8?expire=1661163433&id=351429968698556416&t=41aaa85f3b5189e55a78666374a9712f35e5d0d0a7d4fbd13392353c77552afc&ev=100"
            type=""
          />
        </video> -->
        <!-- <video
          id="videoElement1"
          controls
          autoplay
          style="width: 300px"
          muted
        ></video> -->
        <!-- <div v-show="fullUrl"> -->
            <div v-show="fullUrl">
          <div class="fullVideoBox" :key="index">
            <div class="divText" @click="fullUrl='';">
              <img src="@/assets/unfull.png" alt="">
            </div>
            <video
              id="fullScreen"
              controls
              autoplay
              style="width: 100%"
              muted
            ></video>
          </div>
        </div>
        <!-- <div v-show="!fullUrl"> -->
           <div v-show="!fullUrl">
          <template v-for="(item, index) in fivList">
            <!-- 九宫格 -->
            <!-- <div class="videoBox" :key="index">
              <div class="divText" @click="fullScreen(item)">
                <img src="@/assets/full.png" alt="">
              </div>
              <video
                :id="'videoElement' + index"
                style="width: 100%"
                controls
                autoplay
                muted
                @dblclick="videoDblclick(item)"
              ></video>
            </div> -->
            <!-- 四宫格 -->
            <div class="videoBox_4" :key="index">
              <div class="divText" @click="fullScreen(item)">
                <img src="@/assets/full.png" alt="">
              </div>
              <video
                :id="'videoElement' + index"
                style="width: 100%"
                controls
                autoplay
                muted
                @dblclick="videoDblclick(item)"
              ></video>
            </div>
          </template>
        </div>
      </div>
      <div class="swiper" v-show="!mainType">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(item, idx) in newsList"
              :key="idx"
              @click="newsDetail(item)"
            >
              <img :src="item.titlePic" alt="" />
              <p>{{ item.title }}</p>
            </div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import api from "@/util/api";
// import EZUIKit from "ezuikit-js";
// import EZUIKit from '@/assets/ysSDk/ezuikit.js'

import flvjs from "flv.js";
export default {
  name: "videoAndNews",
  data() {
    return {
      msg: "videoAndNews",
      mainType: true,
      newsList: [],
      fivList: [
        "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
        "https://rtmp01open.ys7.com:9188/v3/openlive/G56058421_1_1.flv?expire=1661992764&id=354908435623174144&t=d65fbf88e6a89553f22407f3ec28f109d451518b315716ec6557356ab850a608&ev=100",
        "https://rtmp01open.ys7.com:9188/v3/openlive/G58455912_1_1.flv?expire=1661992837&id=354908742046244864&t=7f4f9c738fefa9b5cb0e8236401db29736582318326a908c7e104c447cd75695&ev=100",
        "https://rtmp01open.ys7.com:9188/v3/openlive/G58455902_1_1.flv?expire=1661992837&id=354908740784156672&t=1d7f173aa2bf370a99323758e7df6bf6615e855b9eeaa5bd17e307b488c18e40&ev=100",
        // "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
        // "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
        // "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
        // "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
        // "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
      ],
      // fullUrl: "https://rtmp01open.ys7.com:9188/v3/openlive/G00172691_1_1.flv?expire=1661173297&id=351471340875014144&t=88326124a82c5b934c3638837b3684c7fe2dd96a61c5673d4e9f22924d752d95&ev=100",
      fullUrl:'',
      flvPlayer: {},
    };
  },
  methods: {
    // 新闻详情
    newsDetail(data) {
      let that = this;
      that.$store.dispatch("changeFun", {
        str: "newsDetailShow",
        cont: true,
      });
      that.$store.dispatch("changeFun", {
        str: "newsDetails",
        cont: data,
      });
    },
    // 获取推荐新闻
    getTopNews() {
      api.getTopNews({}, (res) => {
        this.newsList = res.data.data;
      });
    },
    //视频浏览
    startPlay() {
      this.fivList.forEach((item, index) => {
        if (flvjs.isSupported()) {
          let player = null;
          let videoElement = document.getElementById("videoElement" + index);
          player = flvjs.createPlayer({
            type: "flv", //=> 媒体类型 flv 或 mp4
            isLive: true, //=> 是否为直播流
            hasAudio: false, //=> 是否开启声音
            url: item, //=> 视频流地址
          });
          player.attachMediaElement(videoElement); //=> 绑DOM
          player.load();
          player.play();
        } else {
          console.log("flvjs不支持");
        }
      });
    },
    videoDblclick(index) {
      console.log(this.fivList[index]);
      console.log(1111);
    },
    // 中间快全部区域
    fullScreen(item) {
      this.fullUrl = item;
      if (flvjs.isSupported()) {
        var fullScreen = document.getElementById("fullScreen");
        this.flvPlayer = flvjs.createPlayer({
          type: "flv",
          url: this.fullUrl,
          // url: item,
        });
        this.flvPlayer.attachMediaElement(fullScreen);
        this.flvPlayer.load();
        this.flvPlayer.play();
      }
    },
  },
  mounted() {
    this.getTopNews();
    new Swiper(".swiper-container", {
      loop: true,
      // 如果需要分页器
      pagination: ".swiper-pagination",
      // 如果需要自动切换海报
      autoplay: 5000, //时间 毫秒
    });
    // this.fullScreen();
    this.startPlay();
    // if (flvjs.isSupported()) {
    //   var videoElement1 = document.getElementById("videoElement1");
    //   this.flvPlayer = flvjs.createPlayer({
    //     type: "flv",
    //     url: "",
    //   });
    //   this.flvPlayer.attachMediaElement(videoElement1);
    //   this.flvPlayer.load();
    //   this.flvPlayer.play();

    //   var videoElement2 = document.getElementById("videoElement2");
    //   this.flvPlayer2 = flvjs.createPlayer({
    //     type: "flv",
    //     url: ,
    //   });
    //   this.flvPlayer2.attachMediaElement(videoElement2);
    //   this.flvPlayer2.load();
    //   this.flvPlayer2.play();
    // }
    // new EZUIKit.EZUIPlayer('myPlayer');
    // new EZUIKit.EZUIKitPlayer({
    //   id: "myPlayer", // 视频容器ID
    // });
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.videoAndNews {
  width: 100%;
  height: 100%;
  color: #fff;
}
.body {
  .titleBox {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #5d96ed;
    position: relative;
    .titlebg {
      height: 60px;
      position: absolute;
    }
    .title {
      position: absolute;
      z-index: 1;
      top: 16px;
      left: 60px;
    }
    .switch {
      position: absolute;
      top: 16px;
      right: 20px;
      height: 32px;
    }
  }
  .main {
    width: 100%;
    height: calc(100% - 62px);
    .swiper {
      width: 100%;
      height: 100%;
      padding: 20px;
      box-sizing: border-box;
      .swiper-container {
        width: 100%;
        height: 100%;
        .swiper-slide {
          width: 100%;
          height: 100%;
          cursor: pointer;
          position: relative;
          img {
            width: 100%;
            height: 100%;
          }
          p {
            width: 100%;
            height: 60px;
            padding: 12px 20px 0 20px;
            box-sizing: border-box;
            position: absolute;
            left: 0;
            bottom: 0;
            font-size: 16px;
            font-weight: 400;
            background-color: rgba(0, 0, 0, 0.5);
          }
        }
      }
      .swiper-pagination {
        width: fit-content;
        left: unset;
        right: 20px;
        bottom: 20px;
        .swiper-pagination-bullet {
          background-color: rgba(251, 251, 251, 0.5) !important;
        }
        .swiper-pagination-bullet-active {
          background-color: #2762b9 !important;
        }
      }
    }
    .video {
      width: 100%;
      height: 100%;
      padding: 9px 32px;
      box-sizing: border-box;
      overflow: hidden;
      .videoBox {
        width: 321px;
        // width: 33%;
        height: 180px;
        // height: 33%;
        float: left;
        position: relative;
      }
      .videoBox_4 {
        position: relative;
        float: left;
        width: 481px;
        height: 270px;
      }
      
      .fullVideoBox {
        width: 100%;
        position: relative;
        img{
          width: 40px !important;
          height: 40px !important;
        }
      }

      .divText {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        width: fit-content;
        padding: 5px;
        box-sizing: border-box;
        display: none;
        cursor: pointer;
        img{
          width: 20px;
          height: 20px;
        }
      }
      .videoBox:hover .divText {
        display: block;
      }
      .videoBox_4:hover .divText {
        display: block;
      }
      .fullVideoBox:hover .divText {
        display: block;
      }
    }
  }
}
</style>
